<template>
    <div class="container">
        <div class="head">
            <img src="./assets/img/dot.png" alt="">
            产量数据及预警
        </div>
        <div class="content">
            <div class="left">
                <div class="left-title">
                    <ul>
                        <li>单线</li>
                        <li>分线</li>
                        <li>大罐</li>
                    </ul>
                </div>
                <div class="left-table">

                    <div class="total-chart-panelT">
                        <!-- <el-table :data="tableData" stripe style="width: 100%" height="500">
                            <el-table-column prop="date" label="日期" width="105">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="105">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" width="110">
                            </el-table-column>
                        </el-table> -->
                        <el-table :data="tableData" border style="width: 100%" height="100%">
                            <el-table-column prop="date" label="日期" width="105">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="105">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" width="110">
                            </el-table-column>
                        </el-table>
                        <div class="panel-footerT" />
                    </div>
                </div>

            </div>


            <div class="right">
                <div class="top">
                    <div class="total-chart-panel">
                        <div class="titleName">单井产量趋势</div>
                        <div class="context">
                            站点：
                            <el-select v-model="value" placeholder="全部" size="mini" style="width: 100px;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div id="total-chart1" class="total-chart" />
                        <div class="panel-footer" />
                    </div>
                </div>

                <div class="bottom">
                    <div class="b-left">
                        <div class="total-chart-panel1">
                            <div class="titleName1">分线级产量趋势</div>
                            <div class="context1">
                                站点：
                                <el-select v-model="value1" placeholder="全部" size="mini" style="width: 100px;">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div id="total-chart2" class="total-chart1" />
                            <div class="panel-footer1" />
                        </div>
                    </div>
                    <div class="b-right">
                        <div class="total-chart-panel2">
                            <div class="titleName2">分线级产量趋势</div>
                            <div class="context2">
                                站点：
                                <el-select v-model="value2" placeholder="全部" size="mini" style="width: 100px;">
                                    <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div id="total-chart3" class="total-chart2" />
                            <div class="panel-footer2" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '单井1#'
            }, {
                value: '选项2',
                label: '单井2#'
            }, {
                value: '选项3',
                label: '单井3#'
            }, {
                value: '选项4',
                label: '单井4#'
            }, {
                value: '选项5',
                label: '单井5#'
            }],
            value: '',
            options1: [{
                value: '选项1',
                label: '一级'
            }, {
                value: '选项2',
                label: '二级'
            }, {
                value: '选项3',
                label: '三级'
            }, {
                value: '选项4',
                label: '四级'
            }],
            value1: '',
            options2: [{
                value: '选项1',
                label: '集液管—1'
            }, {
                value: '选项2',
                label: '集液管—2'
            }, {
                value: '选项3',
                label: '集液管—3'
            }, {
                value: '选项4',
                label: '集液管—4'
            }],
            value2: '',
            optionTotal: {
                color: ['#75f9fd', '#e5323e'],
                title: {
                    //text: '单井产量趋势',
                    textStyle: {
                        color: 'rgb(104,187,196)',
                        fontSize: 20
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '13%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['dataZoom', 'toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: { show: true, textStyle: { color: '#fff' } },
                dataZoom: {
                    type: 'slider',
                    show: false,
                    startValue: 0,
                    endValue: 7,
                    xAxisIndex: [0]
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: [
                        '一月',
                        '二月',
                        '三月',
                        '四月',
                        '五月',
                        '六月',
                        '七月',
                    ]
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '单井1#',
                        type: 'line',
                        data: [
                            54000, 53000, 52000, 54123, 56128, 55520, 54213,
                            21312
                        ]
                    },
                    {
                        name: '单井2#',
                        type: 'line',
                        data: [
                            55555, 23132, 55536, 31231, 43244, 55520, 51203,
                            12312
                        ]
                    },
                    {
                        name: '单井3#',
                        type: 'line',
                        data: [
                            12344, 12314, 53453, 32312, 66435, 12333, 23231,
                            45433
                        ]
                    },
                    {
                        name: '单井4#',
                        type: 'line',
                        data: [
                            41233, 12313, 24235, 42324, 53245, 45676, 51203,
                            12314
                        ]
                    },
                    {
                        name: '单井5#',
                        type: 'line',
                        data: [
                            12333, 22222, 32133, 34534, 63534, 55520, 21332,
                            12332
                        ]
                    },
                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // },
                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // }

                ]
            },
            optionTotal1: {
                color: ['#75f9fd', '#e5323e'],
                title: {
                    //text: '单井产量趋势',
                    textStyle: {
                        color: 'rgb(104,187,196)',
                        fontSize: 20
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '13%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['dataZoom', 'toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: { show: true, textStyle: { color: '#fff' } },
                dataZoom: {
                    type: 'slider',
                    show: false,
                    startValue: 0,
                    endValue: 7,
                    xAxisIndex: [0]
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: [
                        '一月',
                        '二月',
                        '三月',
                        '四月',
                        '五月',
                        '六月',
                        '七月',
                    ]
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '1级',
                        type: 'line',
                        data: [
                            104, 114, 124, 134, 144, 135, 124,
                            115
                        ]
                    },
                    {
                        name: '2级',
                        type: 'line',
                        data: [
                            140, 120, 140, 160, 170, 164, 120,
                            116
                        ]
                    },
                    {
                        name: '3级',
                        type: 'line',
                        data: [
                            110, 120, 140, 150, 130, 132, 120,
                            100
                        ]
                    },
                    {
                        name: '4级',
                        type: 'line',
                        data: [
                            100, 110, 140, 120, 110, 132, 120,
                            110
                        ]
                    },
                    {
                        name: '5级',
                        type: 'line',
                        data: [
                            100, 110, 120, 130, 140, 132, 120,
                            110
                        ]
                    },
                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // },
                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // }

                ]
            },
            optionTotal2: {
                color: ['#75f9fd', '#e5323e'],
                title: {
                    //text: '单井产量趋势',
                    textStyle: {
                        color: 'rgb(104,187,196)',
                        fontSize: 20
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '15%',
                    top: '13%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['dataZoom', 'toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: { show: true, textStyle: { color: '#fff' } },
                dataZoom: {
                    type: 'slider',
                    show: false,
                    startValue: 0,
                    endValue: 7,
                    xAxisIndex: [0]
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: [
                        '一月',
                        '二月',
                        '三月',
                        '四月',
                        '五月',
                        '六月',
                        '七月',
                    ]
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '集液管—1',
                        type: 'line',
                        data: [
                            204, 314, 424, 534, 444, 435, 524,
                            315
                        ]
                    },
                    {
                        name: '集液管—2',
                        type: 'line',
                        data: [
                            340, 220, 440, 360, 470, 564, 320,
                            316
                        ]
                    },
                    {
                        name: '集液管—3',
                        type: 'line',
                        data: [
                            210, 320, 440, 550, 430, 332, 220,
                            200
                        ]
                    },
                    {
                        name: '集液管—4',
                        type: 'line',
                        data: [
                            300, 410, 540, 620, 410, 532, 320,
                            310
                        ]
                    },

                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // },
                    // {
                    //     name: '单井2#',
                    //     type: 'line',
                    //     data: [
                    //         55555, 55520, 55536, 55510, 55510, 55520, 51203,
                    //         53621
                    //     ]
                    // }

                ]
            },
            isClicked: false,
            tableData: [{
                date: '单井1#',
                name: '1.2t',
                address: '过高'
            }, {
                date: '单井1#',
                name: '2.3t',
                address: '过低'
            }, {
                date: '单井1#',
                name: '4.5t',
                address: '波动'
            }, {
                date: '单井3#',
                name: '1.7t',
                address: '波动'
            }, {
                date: '单井2#',
                name: '2.5t',
                address: '过低'
            }, {
                date: '单井3#',
                name: '1.6t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }, {
                date: '单井2#',
                name: '2.3t',
                address: '过高'
            }],
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            var chartDom1 = document.getElementById('total-chart1')
            var totalChart = echarts.init(chartDom1)
            totalChart.setOption(this.optionTotal, true)
            var chartDom2 = document.getElementById('total-chart2')
            var totalChart2 = echarts.init(chartDom2)
            totalChart2.setOption(this.optionTotal1, true)
            var chartDom3 = document.getElementById('total-chart3')
            var totalChart3 = echarts.init(chartDom3)
            totalChart3.setOption(this.optionTotal2, true)
            window.addEventListener('resize', function () {
                totalChart.resize()
                totalChart2.resize()
                totalChart3.resize()
            })
            optionTotal1;
        }
    }
}
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.container {
    background-color: #04051A;
    width: 100%;
    height: 100vh;
}

.head {
    background-image: url('./assets/img/headbg.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 50px;
    font-size: 24px;
    color: #fff;
    line-height: 50px;
    font-weight: 700;
    display: flex;
    align-items: center;

    img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-left: 10px;
    }
}

.content {
    display: flex;
    justify-content: space-evenly;
    height: 100vh;

    .left {
        // background-color: #fff;
        width: 38%;
        height: 100vh;

        .left-title {
            width: 100%;
            height: 6%;
            color: #fff;
            margin-bottom: 10px;

            ul {
                display: flex;
                justify-content: center;
                width: 170px;
                border: 1px solid #1684FC;
                background-color: #011E4D;
                border-radius: 5px;
                margin: auto;
                margin-top: 20px;
                // margin-right: 20%;


                li {
                    padding: 10px;
                    cursor: pointer;
                }

                li:nth-child(1) {
                    border-right: 1px solid #1684FC;
                }

                li:nth-child(3) {
                    border-left: 1px solid #1684FC;
                }
            }

        }

        .left-table {
            // background-image: url('./assets/img/tablebg.png');
            // background-size: 300px 200vh;
            // background-size: cover;
            // background-repeat: no-repeat;
            // display: flex;
            // margin-left: 8%;
            width: 400px;
            height: 100%;
            padding: 10px;
            margin: auto;
            // margin-right: 13%;
            margin-top: 10px;

            .total-chart-panelT {
                width: 90%;
                height: 75%;
                background-color: #0b1539;
                border: 2px solid #33a2f8;
                padding: 8px 8px;
                position: relative;

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 30px;
                    height: 30px;
                    border-left: 3px solid #02a6b5;
                    border-top: 3px solid #02a6b5;
                    content: '';
                }

                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 30px;
                    height: 30px;
                    border-right: 3px solid #02a6b5;
                    border-top: 3px solid #02a6b5;
                    content: '';
                }

                .panel-footerT {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;

                    &::before {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 30px;
                        height: 30px;
                        border-left: 3px solid #02a6b5;
                        border-bottom: 3px solid #02a6b5;
                        content: '';
                    }

                    &::after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 30px;
                        height: 30px;
                        border-right: 3px solid #02a6b5;
                        border-bottom: 3px solid #02a6b5;
                        content: '';
                    }
                }
            }
        }
    }

    .right {
        width: 70%;
        height: 100%;
        // background-color: red;

        .top {
            margin-top: 15px;
            height: 48vh;
            // margin-bottom: px;

            .total-chart-panel {
                width: 95%;
                height: 90%;
                background-color: #0b1539;
                border: 2px solid #33a2f8;
                padding: 8px 8px;
                position: relative;

                .titleName {
                    margin: 5px;
                    font-size: 24px;
                    color: rgb(104, 187, 196);
                }

                .context {
                    font-weight: 100;
                    color: white;
                    // background-color: #fff;
                    width: 300px;
                    height: 5px;

                    ::v-deep .el-form-item__label {
                        color: #6da7f0;
                    }

                    ::v-deep .el-input__inner {
                        background-color: transparent !important;
                        border: 1px solid #75f9fd;
                    }
                }

                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 30px;
                    height: 30px;
                    border-left: 3px solid #02a6b5;
                    border-top: 3px solid #02a6b5;
                    content: '';
                }

                &::after {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 30px;
                    height: 30px;
                    border-right: 3px solid #02a6b5;
                    border-top: 3px solid #02a6b5;
                    content: '';
                }

                .total-chart {
                    width: 100%;
                    height: 90%;
                    // position: absolute;
                    // left: 0;
                    // right: 0;
                    // margin-left: 20px;
                }

                .panel-footer {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;

                    &::before {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 30px;
                        height: 30px;
                        border-left: 3px solid #02a6b5;
                        border-bottom: 3px solid #02a6b5;
                        content: '';
                    }

                    &::after {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 30px;
                        height: 30px;
                        border-right: 3px solid #02a6b5;
                        border-bottom: 3px solid #02a6b5;
                        content: '';
                    }
                }
            }
        }

        .bottom {
            display: flex;
            justify-content: space-evenly;
            height: 50vh;

            .b-left {
                // background-color: #bfc;
                width: 50%;

                .total-chart-panel1 {
                    width: 90%;
                    height: 75%;
                    background-color: #0b1539;
                    border: 2px solid #33a2f8;
                    padding: 8px 8px;
                    position: relative;

                    .titleName1 {
                        margin: 5px;
                        font-size: 24px;
                        color: rgb(104, 187, 196);
                    }

                    .context1 {
                        font-weight: 100;
                        color: white;
                        // background-color: #fff;
                        width: 300px;
                        height: 5px;

                        ::v-deep .el-form-item__label {
                            color: #6da7f0;
                        }

                        ::v-deep .el-input__inner {
                            background-color: transparent !important;
                            border: 1px solid #75f9fd;
                        }
                    }

                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 30px;
                        height: 30px;
                        border-left: 3px solid #02a6b5;
                        border-top: 3px solid #02a6b5;
                        content: '';
                    }

                    &::after {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 30px;
                        height: 30px;
                        border-right: 3px solid #02a6b5;
                        border-top: 3px solid #02a6b5;
                        content: '';
                    }

                    .total-chart1 {
                        width: 100%;
                        height: 65%;
                        // position: absolute;
                        // left: 0;
                        // right: 0;
                        margin-top: 22px;
                        // margin-left: 20px;
                    }

                    .panel-footer1 {
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;

                        &::before {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 30px;
                            height: 30px;
                            border-left: 3px solid #02a6b5;
                            border-bottom: 3px solid #02a6b5;
                            content: '';
                        }

                        &::after {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 30px;
                            height: 30px;
                            border-right: 3px solid #02a6b5;
                            border-bottom: 3px solid #02a6b5;
                            content: '';
                        }
                    }
                }
            }

            .b-right {
                background-color: black;
                width: 50%;

                .total-chart-panel2 {
                    width: 90%;
                    height: 75%;
                    background-color: #0b1539;
                    border: 2px solid #33a2f8;
                    padding: 8px 8px;
                    position: relative;

                    .titleName2 {
                        margin: 5px;
                        font-size: 24px;
                        color: rgb(104, 187, 196);
                    }

                    .context2 {
                        font-weight: 100;
                        color: white;
                        // background-color: #fff;
                        width: 300px;
                        height: 5px;

                        ::v-deep .el-form-item__label {
                            color: #6da7f0;
                        }

                        ::v-deep .el-input__inner {
                            background-color: transparent !important;
                            border: 1px solid #75f9fd;
                        }
                    }

                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 30px;
                        height: 30px;
                        border-left: 3px solid #02a6b5;
                        border-top: 3px solid #02a6b5;
                        content: '';
                    }

                    &::after {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 30px;
                        height: 30px;
                        border-right: 3px solid #02a6b5;
                        border-top: 3px solid #02a6b5;
                        content: '';
                    }

                    .total-chart2 {
                        width: 100%;
                        height: 65%;
                        // position: absolute;
                        // left: 0;
                        // right: 0;
                        margin-top: 22px;
                        // margin-left: 20px;
                    }

                    .panel-footer2 {
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;

                        &::before {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 30px;
                            height: 30px;
                            border-left: 3px solid #02a6b5;
                            border-bottom: 3px solid #02a6b5;
                            content: '';
                        }

                        &::after {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 30px;
                            height: 30px;
                            border-right: 3px solid #02a6b5;
                            border-bottom: 3px solid #02a6b5;
                            content: '';
                        }
                    }
                }
            }

        }
    }
}

::v-deep .el-table,
        ::v-deep .el-table tr,
        ::v-deep .el-table th {
          background-color: transparent;
          font-weight: bold;
          color: #fff;
        }
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
          background-color: #212e3e !important;
        }
</style>